<template>
  <view @tap="$emit('click', $event)" class="matchShow" :style="styles">
    <view class="top">
      <slot name="top">
        <view class="time">
          <slot name="time">
            <view class="image"><image :src="gameIcon"></image></view>
            <view class="text">{{ time | dateWeek }}</view>
          </slot>
        </view>
        <view v-if="isShowFollow && !follow" class="follow cuIcon-favor" @click.stop="$emit('event-follow')"></view>
        <view v-if="isShowFollow && follow" class="follow cuIcon-favorfill" @click.stop="$emit('event-unfollow')"></view>
      </slot>
    </view>
    <view class="team-info">
      <cu-avatar size="90upx" :img="teamALogo" />
      <view class="info">
        <view class="name" v-text="teamAName"></view>
        <view class="score">
          <slot name="score">{{ teamAScore }}:{{ teamBScore }}</slot>
        </view>
        <view class="name" v-text="teamBName"></view>
        <view :class="{ win: isShowWin, A: win === 'A', B: win === 'B' }"></view>
      </view>
      <cu-avatar size="90upx" :img="teamBLogo" />
    </view>
    <view class="navigator" v-if="isShowNavigator" v-text="navigatorText"></view>
  </view>
</template>

<script>
import cuAvatar from "@/components/cuAvatar.vue";
const weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
export default {
  name: "macthShow",
  inheritAttrs: false,
  components: { cuAvatar },
  props: {
    url: String,
    time: {
      type: [String, Number],
      default: 0
    },
    styles: [Array, Object, String],
    gameIcon: String,
    teamALogo: String,
    teamAName: String,
    teamBLogo: String,
    teamBName: String,
    teamAScore: {
      type: [String, Number],
      default: 0
    },
    teamBScore: {
      type: [String, Number],
      default: 0
    },
    isShowNavigator: {
      type: Boolean,
      default: true
    },
    // 是否限时收藏按钮
    isShowFollow: {
      type: Boolean,
      default: false
    },
    // 是否收藏
    follow: {
      type: [Boolean, Number],
      default: false
    },
    isShowWin: {
      type: Boolean,
      default: false
    },
    win: {
      type: String,
      validator(value) {
        return ["A", "B"].includes(value);
      },
      default: "A"
    },
    navigatorText: {
      type: String,
      default: "前往观战 >>"
    }
  },
  filters: {
    dateWeek: function(timestamp = 0) {
      const t = timestamp * 1000;
      const d = new Date(t);
      return (
        (d.getMonth() + 1 < 10 ? "0" + d.getMonth() + 1 : d.getMonth() + 1) + "月" + (d.getDate() < 10 ? "0" + d.getDate() : d.getDate()) + "日 " + weekDay[new Date(t).getDay()]
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.matchShow {
  background: url("~@/static/images/pk_bg.png");
  background-size: 100%;
  width: 100%;
  text-align: center;
  overflow: hidden;
  .top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60upx;
  }
  .time {
    padding: 0 30upx;
    min-width: 350upx;
    height: 50upx;
    background: #ffffff;
    border: 2px solid #fed566;
    border-radius: 50upx;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    .image {
      width: 35upx;
      height: 35upx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .follow {
    font-size: 38upx;
    margin-left: 10upx;
    cursor: pointer;
  }
  .team-info {
    margin: 16upx auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .info {
      background: rgb(33, 39, 43);
      height: 80upx;
      width: 500upx;
      border-radius: 80upx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #ffffff;
      font-size: 38upx;
      padding: 0 30upx;
      position: relative;
      .name {
        font-size: 30upx;
      }
      .score {
        font-size: 58upx;
        letter-spacing: 15upx;
      }
      .win {
        width: 94upx;
        height: 85upx;
        background-image: url("~@/static/images/video/win01.png");
        background-size: 100% 100%;
        position: absolute;
        top: -40upx;
        &.A {
          left: -30upx;
        }
        &.B {
          right: -30upx;
        }
      }
    }
  }
  .navigator {
    text-align: center;
    color: #ffffff;
    font-size: 24upx;
  }
}
</style>
